import { Options as Component } from 'vue-property-decorator';
import { Vue } from 'vue-class-component';
import { Form, Field, Button, Toast } from 'vant';

@Component
export default class Register extends Vue {
  private form = {
    username: '',
    password: '',
    confirmPassword: ''
  };

  private onSubmit() {
    if (this.form.password !== this.form.confirmPassword) {
      Toast.fail('两次密码不一致');
      return;
    }
    // TODO: 实现注册逻辑
    Toast.success('注册成功');
    this.$router.push('/login');
  }

  render() {
    return (
      <div class="p-4">
        <h1 class="text-2xl font-bold mb-6 text-center">注册</h1>
        <Form onSubmit={this.onSubmit}>
          <Field
            v-model={this.form.username}
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            rules={[{ required: true, message: '请填写用户名' }]}
          />
          <Field
            v-model={this.form.password}
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            rules={[{ required: true, message: '请填写密码' }]}
          />
          <Field
            v-model={this.form.confirmPassword}
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请再次输入密码"
            rules={[{ required: true, message: '请确认密码' }]}
          />
          <div class="mt-8">
            <Button round block type="primary" native-type="submit">
              注册
            </Button>
            <div class="text-center mt-4">
              <router-link to="/login" class="text-blue-500">
                已有账号？去登录
              </router-link>
            </div>
          </div>
        </Form>
      </div>
    );
  }
} 